<script lang="ts" setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
// 导入图标工具
import { Edit, Message, Clock, Document } from "@/utils/icons.js";

const route = useRoute();
const resumeId = route.params.id;

// 简历数据
const resume = ref({
    id: resumeId,
    name: "张三",
    job: "前端工程师",
    status: "pending",
    phone: "13800138001",
    email: "zhangsan@example.com",
    education: "本科",
    experience: "3年",
    skills: ["Vue", "React", "TypeScript"],
    attachments: ["简历.pdf", "作品集.zip"],
});

// 状态选项
const statusOptions = [
    { label: "待处理", value: "pending" },
    { label: "已查看", value: "viewed" },
    { label: "已约面", value: "interview" },
    { label: "不合适", value: "rejected" },
];

// 备注列表
const notes = ref([
    {
        id: 1,
        content: "候选人技术栈匹配度较高",
        time: "2025-05-12 10:30",
        author: "HR张",
    },
]);

// 联系记录
const contacts = ref([
    {
        id: 1,
        type: "电话",
        content: "初步沟通，确认求职意向",
        time: "2025-05-12 11:00",
        author: "HR张",
    },
]);

// 新备注内容
const newNote = ref("");

// 添加备注
const addNote = () => {
    if (!newNote.value.trim()) return;

    notes.value.unshift({
        id: Date.now(),
        content: newNote.value,
        time: new Date().toLocaleString(),
        author: "当前用户",
    });
    newNote.value = "";
};
</script>

<template>
    <div class="resume-detail">
        <div class="header">
            <h2>简历详情</h2>
            <div class="actions">
                <el-select v-model="resume.status" style="width: 120px">
                    <el-option
                        v-for="item in statusOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
        </div>

        <div class="resume-content">
            <div class="basic-info">
                <h3>基本信息</h3>
                <el-descriptions border>
                    <el-descriptions-item label="姓名">{{ resume.name }}</el-descriptions-item>
                    <el-descriptions-item label="应聘职位">{{ resume.job }}</el-descriptions-item>
                    <el-descriptions-item label="电话">{{ resume.phone }}</el-descriptions-item>
                    <el-descriptions-item label="邮箱">{{ resume.email }}</el-descriptions-item>
                    <el-descriptions-item label="学历">{{ resume.education }}</el-descriptions-item>
                    <el-descriptions-item label="工作经验">{{ resume.experience }}</el-descriptions-item>
                </el-descriptions>

                <h3>技能</h3>
                <div class="skills">
                    <el-tag v-for="skill in resume.skills" :key="skill">{{ skill }}</el-tag>
                </div>

                <h3>附件</h3>
                <div class="attachments">
                    <el-link v-for="file in resume.attachments" :key="file" :icon="Document" type="primary">
                        {{ file }}
                    </el-link>
                </div>
            </div>

            <div class="right-panel">
                <div class="notes">
                    <h3>备注</h3>
                    <div class="add-note">
                        <el-input v-model="newNote" type="textarea" placeholder="添加备注..." :rows="3" />
                        <el-button type="primary" :icon="Edit" @click="addNote">添加</el-button>
                    </div>
                    <div class="notes-list">
                        <div v-for="note in notes" :key="note.id" class="note-item">
                            <div class="note-content">{{ note.content }}</div>
                            <div class="note-meta">
                                <span>{{ note.author }}</span>
                                <span>{{ note.time }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="contacts">
                    <h3>联系记录</h3>
                    <div class="contacts-list">
                        <div v-for="contact in contacts" :key="contact.id" class="contact-item">
                            <div class="contact-type">
                                <el-icon><Message /></el-icon>
                                {{ contact.type }}
                            </div>
                            <div class="contact-content">{{ contact.content }}</div>
                            <div class="contact-meta">
                                <span>{{ contact.author }}</span>
                                <span>{{ contact.time }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.resume-detail {
    padding: 20px;
    background-color: #f8fafc;
    min-height: 100vh;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.resume-content {
    display: flex;
    gap: 20px;
}

.basic-info {
    flex: 1;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.right-panel {
    width: 400px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.notes,
.contacts {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.skills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.attachments {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.add-note {
    margin-bottom: 20px;
}

.note-item,
.contact-item {
    padding: 10px 0;
    border-bottom: 1px solid #f1f1f1;
}

.note-meta,
.contact-meta {
    display: flex;
    justify-content: space-between;
    color: #999;
    font-size: 12px;
    margin-top: 5px;
}

.contact-type {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
}
</style>
